<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="${ctxStatic }/mui/css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="${ctxStatic }/wx/css/AAcars.css" />
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.picker.min.css" />
<style>
		body{
			background: #F5F5F5;
		}
		.mui-table-view{
			background: none;
		}
		.mui-input-row label,.mui-input-row input{
			font-size: 14px;
		}
		.mui-numbox {
    float: left !important;
    margin: 6px !important;
    height: 28px;
    border: 1px solid #16C59B;
    background-color: #fff;
}
.mui-numbox .mui-input-numbox {
    border-right: solid 1px #16C59B !important;
    border-left: solid 1px #16C59B !important;
}
.mui-numbox [class*=btn-numbox], .mui-numbox [class*=numbox-btn] {
    color: #16C59B !important;
    background-color: #fff;
}
	</style>
<body>
		<div id="carpooling">
			<div class="mui-navbar-inner mui-bar mui-bar-nav" style="background: #16C59B;">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">拼车发布</h1>
			</div>
			<div class="mui-content">
				  <div class="carpooling_warp">
				  	 <div class="carpooling_top">
				  	 	   <p>
				  	 	   	<span class="carpooling_t_ico">
				  	 	   		 <img src="${ctxStatic }/wx/img/day_img/yongche_dingzhi@2x.png" />
				  	 	   	</span>
				  	 	   	<span>${productname}</span>
				  	 	   </p>
				  	 	   <p>总额￥${suitrtnprice}</p>
				  	 </div>
				  	 <div class="carpooling_form">
				  	 	  <form class="mui-input-group" id="shareForm">
				  	 	  	<input type="hidden"  name="cuponsId" value="${cuponsId}"/>
				  	 	  	<input type="hidden"  name="userid" value="${sessionScope.front_user.id}"/>
				  	 	  	<input type="hidden"  name="boardaddr" value="${boardaddr}"/>
				  	 	  	<input type="hidden"  name="fromdate" value="${fromdate}" id="fromdate"/>
				  	 	  	<input type="hidden"  name="productname" value="${productname}" id="productname"/>
				  	 	  	<input type="hidden"  name="abbr" value="${abbr}" id="abbr"/>
				  	 	  	<input type="hidden"  name="suitrtnprice" value="${suitrtnprice}" id="suitrtnprice"/>
				  	 	  	<input type="hidden"  name="officename" value="${officename}" id="officename"/>
				  	 	  	<input type="hidden"  name="departsite" value="${departsite}" id="departsite"/>
				  	 	  	<input type="hidden"  name="destsite" value="${destsite}" id="destsite"/>
				  	 	  	<input type="hidden"  name="cargotype" value="${cargotype}" id="cargotype"/>
				  	 	      <div class="mui-input-row">
				  	 	          <label>成团人数</label>	 	         
				  	 	         <div class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='${seats}'>
				  	 	             <button class="mui-btn mui-btn-numbox-minus purchasenum" type="button">-</button>
				  	 	             <input class="mui-input-numbox" type="number" value="${seats}" name="minamount" id="num" />
				  	 	             <button class="mui-btn mui-btn-numbox-plus purchasenum" type="button">+</button>
				  	 	         </div>
				  	 	      </div>
				  	 	      <div class="mui-input-row">
				  	 	          <label>截止时间</label>
				  	 	          <input id="carpooling_time" readonly="readonly" type="text" name="enddate" class="mui-input-clear" placeholder="请选择拼车截止时间">
				  	 	      </div>
				  	 	      <div class="mui-input-row">
				  	 	          <label>发起人</label>
				  	 	          <input type="text" class="mui-input-clear" placeholder="请填写发起人姓名" id="contacts" name="contacts">
				  	 	      </div>
				  	 	      <div class="mui-input-row">
				  	 	          <label>联系电话</label>
				  	 	          <input type="text" class="mui-input-clear" id="phone" name="phone" placeholder="请填写联系电话" value="${sessionScope.front_user.mobile}">
				  	 	      </div>
				  	 	      <div class="carpooling_expan">
				  	 	      	<p>截止时间：不得超过发出时间，建议提前3-5天。</p>
				  	 	      	<p>拼车成团：人数不得超过车型可乘人数。</p>
				  	 	      </div>
				  	 	  </form>
				  	 </div>
				  	 <div class="carpooling_Notice">
				  	 	  <p class="carpooling_N_tit">
				  	 	  	<span>
				  	 	  		<img src="${ctxStatic }/wx/img/day_img/xuzhi_atbc@2x.png" />
				  	 	  	</span>
				  	 	  	<span>拼车须知</span>
				  	 	  </p>
				  	 	  <div class="carpoo_JK">
				  	 	<p>	 1、到达截止时间时，未达成团人数则视为拼车失败，款项自动退还原账户 ；</p>  
 	 	                <p>	 2、拼团过程中，可随时免费取消拼车；</p>  
 	 	                <p>	3、拼车达到成团人数，则拼车成功，订单不支持退款；</p>  
 	 	                <p>	4、1.2m以上视为成人必须购买成人票，1.2m以下儿童不占座可不用购票；</p>  
 	 	                <p>	5、拼车成功后，请拼车人于出行当天至少提前20分钟到达上车地点，以便司机准时发车；</p>  
 	 	                <p>	6、由于拼车人原因未准时上车，产生的损失由出行人自行承担；</p>  
 	 	                <p>	7、行车具体车牌号及司机信息将于出行前1-2天以短信形式发给拼车人，请注意查收；</p>  
 	 	                <p>	8、各景点停留具体时间以司机行车为准；</p>  
 	 	                <p>	9、拼车过程中遇到任何问题，请咨询客服400－928－7733。</p>  
				  	 	  </div>
				  	 </div>
				  </div>
			</div>
		   <nav class="mui-bar mui-bar-tab carpooling_nav_box">
                <div class="mui-row">
                	  <div class="mui-col-xs-6">
                	  	 <p>拼车价格：￥<span id="suitrtn">${avgPrice}</span></p>
                	  </div>
                	   <div class="mui-col-xs-6" style="text-align: center;">
                	   	  <button class="carpooling_n_btn" id="sub">一键拼车</button>
                	   </div>
                </div>
		   </nav>
		</div>
<script type="text/javascript" src="${ctxStatic }/zepto/zepto.min.js" ></script>
<script src="${ctxStatic }/mui/js/mui.min.js"></script>
<script type="text/javascript" src="${ctxStatic }/mui/js/mui.picker.min.js" ></script>
		<script type="text/javascript">
			mui.init();
			Zepto(function(){
				var start_time_picker = new mui.DtPicker({});
				$('#carpooling_time').on('tap',function(){
					setTimeout(function(){
						start_time_picker.show(function(items){
							$('#carpooling_time').val(items.text);
						});
					},200);
				});
				var suitrtnprice = ${suitrtnprice};
				var totalprice = ${suitrtnprice};
				$('.purchasenum').on('tap',function(){
					//清空优惠券信息
					var val = $("#num").val();
					totalprice = accMul(val,suitrtnprice);
					$('#suitrtn').text(totalprice.toFixed(0));
				});
				//提交
				$('#sub').on('tap',function(){
					var msg= '';
					var r = /^1[3|4|5|7|8]\d{9}$/;
					var x = $('#carpooling_time').val();//出发地
					var y = $('#contacts').val();//出发地
					var z = $('#phone').val();//出发地
					if(x == ''){
						msg = '请选择拼车截止时间';
					}else if(y==''){
						msg = '请填写联系人';
					}else if(z==''){
						msg = '请填写联系电话';
					}else if(!r.test(z)){
						msg = '手机号格式不正确';
					}
					if(msg != ''){
						mui.alert(msg, '提示');
					}else{
						var x = $('#fromdate').val();
						var y = $('#carpooling_time').val();
						mui.post('${ctxWx}/pu/checkTime',{time:x,endtime:y},function(d){
							if(d==4){
								mui.alert(msg, '距离发车时间不足2小时，请重新选择发车时间');
								return;
							}else if(d==3){
								mui.alert(msg, '截止时间不能超过发车时间');
								return;
							} else{
								mui.post('${ctxFront}/mobile/genShareAirProduct',$('#shareForm').serialize(),function(d){
									if(d.code=='200'){
										var sid = d.data.sid;
										window.location.href = "${ctxWx}/share/toShareBooking?sid="+sid+"&avgprice="+d.data.avgprice;
									}else{
										mui.alert(d.message);
									}
								});
							}
						})
					}
				})
			});
			function accMul(arg1, arg2) {
				var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
				try {
					m += s1.split(".")[1].length;
				} catch (e) {
				}
				try {
					m += s2.split(".")[1].length;
				} catch (e) {
				}
				return Number(s2.replace(".", "")) / Number(s1.replace(".", ""))
						/ Math.pow(10, m);
			}
		</script>
	</body>

</html>